<template>
    <div class="container">
        <div class="top">
            <span class="count">未来7天游客量趋势图</span>
            <img src="@/assets/images/dataScreen-title.png" alt="">
        </div>
        <div class="lineEcharts" ref="lineEchartsEL"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import * as echarts from 'echarts/core';
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

const getTime = () => {
    let arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    let date = new Date()
    let newArr = []

    arr.slice(date.getDay()).map(i => newArr.push(i))
    arr.slice(0, date.getDay()).map(i => newArr.push(i))
    return newArr
}

const lineEchartsEL = ref()

const chinaEchartsFun = () => {
    const lineEcharts = echarts.init(lineEchartsEL.value);
    lineEcharts.setOption({
        tooltip: {
            trigger: 'item'
        },
        textStyle: {
            color: '#fff'
        },
        grid: {
            top: '5%',
            bottom: '15%',
            left: '7%',
            right: '7%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: getTime()
        },
        yAxis: {
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            },
            splitLine: {
                show: false
            }
        },
        series: [
            {
                data: [820, 432, 901, 634, 1290, 330, 1320],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#00fff0'
                        }, {
                            offset: 1, color: '#1abda5'
                        }],
                        global: false
                    }
                }
            }
        ]
    })

}

onMounted(() => {
    chinaEchartsFun()
})

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    flex: 1;
    background-image: url('@/assets/images/dataScreen-main-lb.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0.5vw 0;

    .top {
        width: 100%;
        height: 20%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .count {
            display: block;
            font-size: 1vw;
            font-weight: 550;
        }

        img {
            width: 5vw;
            height: 0.5vw;
        }
    }

    .lineEcharts {
        width: 100%;
        height: 80%;
    }
}
</style>